<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/demo.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>

<body class="easyui-layout">
    <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
    <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">

        <div class="easyui-accordion" data-options="fit:true,border:false">
            <ul id="treeMenu"></ul>
        </div>

        <!--<div id="tab-tools">-->
            <!--<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>-->
            <!--<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>-->
        <!--</div>-->
    </div>
    <div data-options="region:'center'" id="tt"  class="easyui-tabs">

    </div>
</body>

<script type="text/javascript">


    $('#treeMenu').tree({
        method: 'GET',
        url:'/tree_data.json',
        onClick: function(node){
            console.info(node)
            if(node.isFolder === 1){

                $('#tt').tabs('add',{
                    title: node.text,
                    href: node.url,
                    //content: '<div style="padding:10px">Content'+index+'</div>',
                    closable: true
                });
            }
        },
    });


</script>

</html>